<template>
  <div class="boxsin">
    <div>
      <div class="mapBox">
        <div class="border-titles"></div>
        <el-amap
          vid="amap"
          :plugin="plugin"
          :events="events"
          class="amap"
          :center="center"
          :zoom="zoom"
          viewMode="3D"
          expandZoomRange="true"
          :pitch="68"
          buildingAnimation="true"
          showLabel="false">
          <el-amap-marker v-for="(marker, index) in markers"
                          :key="index"
                          :position="marker.position" vid="amapMarker" :icon="icon" ></el-amap-marker>

          <div id="yourBox" class="yourBox" v-if="showVedioFlag"></div>
          <div id="meBox" class="meBox" v-if="showVedioFlag"></div>
          <div class="boxbtn" @click="closeVedio()" v-if="showVedioFlag"></div>


          <div class="jzBox" :class="[jzBoxShow ? 'py1':'py2']">
            <div class="jzBox-l" @click="toggleJzBox">
              <div class="jzBox-btn" :class="[jzBoxShow ? 'xz1':'xz2']"></div>
              <span v-if="!jzBoxShow">展开记者信息</span>
              <span v-if="jzBoxShow">收起记者信息</span>
            </div>
            <div class="jzBox-r" :class="[!jzBoxShow ? 'py3 jzBox-r' : 'jzBox-r']">
              <div class="jzBox-in">
                <div class="jzBox-man" v-for="(man, index) in manData" :key="index">
                  <div class="jzBox-man-top">
                    <div class="jzBox-man-top-index">{{index+1}}</div>
                    <img class="jzBox-man-top-img" :src="man.avatar" alt @click="goLocation(man)"/>
                    <div class="jzBox-man-top-text" @click="goLocation(man)">
                      <div class="jzBox-man-top-text1" >{{man.username}}</div>
                      <div class="jzBox-man-top-text2">{{man.class}}</div>
                    </div>
                    <img
                      class="jzBox-man-top-btn"
                      src="../assets/fas fa-video.svg"
                      alt
                      @click="goVideo(man)"
                    />
                  </div>
                  <div class="jzBox-man-bottom">
                    <span v-for="(task, index) in man.taskInfo" :key="index" ><span v-if="index < 3">{{task&&task.tname}}</span></span>

                  </div>
                </div>
              </div>

            </div>
          </div>
        </el-amap>
      </div>
    </div>

    <!-- <div class="boxs">
      <div class="manBox">
        <div class="manBox-in" v-for="(data,i) in manData" :key="i">
          <span class="manBox-num" @click="goLocation(data)">{{i+1}}</span>
          <div class="manBox-img" @click="goLocation(data)">
            <img class="manBox-img" :src="data.avatar" alt />
          </div>
          <div class="manBox-class">
            <div>{{data.username}}</div>

            <div>{{data.class}}</div>
          </div>
          <img class="manBox-btn" src="../assets/fas fa-video.svg" alt @click="goVideo(data)" />
        </div>
      </div>
    </div>-->
  </div>
</template>
<script>
import apis from "../../public/api";
import TRTC from "trtc-js-sdk";
import beige from "@/assets/GIF-144.gif";

// var client,localStream;
export default {
  name: "manBox",
  data() {
    return {
      client: null,
      localStream: null,
      manData: [],
      jzBoxShow: false,
      center: [118.741637, 31.988347], // 高德地图中心点
      zoom: 17, // 地图缩放

      events: {
        init(o) {
          o.setMapStyle("amap://styles/2b8a267cc6fd3c7947fe5478f21d3bea"); //自定义的高德地图的样式，我选的是马卡龙
        }
      },
      plugin: [],
      tempUser: "",
      showVedioFlag: false,
      icon:"",
      markers : []

  };
  },
  methods: {
    toggleJzBox(){
      this.jzBoxShow = !this.jzBoxShow;
    },
    goLocation: function(data) {
      this.center = [data.lon, data.lat];
    },
    closeVedio: function() {
      // 取消发布本地流

      let localuser  = this.tempUser
      this.client.unpublish(this.localStream).then(() => {
        // 取消发布本地流成功
        this.client
          .leave()
          .then(() => {
            // leaving room success
            (this.showVedioFlag = false), (this.tempUser = "");
            this.localStream.stop();
            this.localStream.close();
            this.localStream = null;
          })
          .catch(error => {
            console.error("leaving room failed: " + error);
          });
      });


      this.axios
              .post(
                      "https://console.tim.qq.com/v4/openim/sendmsg?sdkappid=1400460026&identifier=188888888&usersig=eJwtjFELgjAURv-LnkPuXds0oRehULIgV74PNu2SxlCJIvrvmfq9fefA*bBLroOn61jMeABsNX2y7jFQRRPGaNkie3s33pNlMQoAoQC4mo17eercyKWUHABmOlD7ZwqicC02gEuF6rHdGnE6Q4oGswMpTJOyO*a3d3FNwqbUu74Z2rpAvwedbdn3ByrMMJo_&random=99999999&contenttype=json",
                      {
                        //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
                        SyncOtherMachine: 2,
                        To_Account: localuser,
                        MsgLifeTime: 60,
                        MsgRandom: 1287657,
                        MsgTimeStamp: 1557387418,
                        MsgBody: [
                          {
                            MsgType: "TIMCustomElem",
                            MsgContent: {
                              Ext:
                                      '{"roomID":99999999,"version":2,"videoState":5,"requestUser":"18262612245"}',
                              Data:  '{"roomID":99999999,"version":2,"videoState":5,"requestUser":"18262612245"}'

                            }
                          }
                        ]
                      }
              )
              .then(res => {
                console.log(res);
              })
              .catch(function(error) {
                alert(error);
              });

    },

    goVideo: function(data) {
      //正在通信的账号
      this.tempUser = data.id;
      // alert(this.tempUser)
      this.showVedioFlag = true;

      //先注册远端流
      this.client.on("stream-added", event => {
        const remoteStream = event.stream;
        console.log("远端流增加: " + remoteStream.getId());
        //订阅远端流
        this.client.subscribe(remoteStream);
      });
      this.client.on("stream-subscribed", event => {
        const remoteStream = event.stream;
        console.log("远端流订阅成功：" + remoteStream.getId());
        // 播放远端流
        remoteStream.play("yourBox");
      });
      //创建房间
      this.client
        // .join({ roomId: data.username, anchor: "anchor" })
        .join({ roomId: "99999999", anchor: "anchor" })
        .then(() => {
          // 从麦克风和摄像头采集本地音视频流
          this.localStream = TRTC.createStream({ audio: true, video: true });
          this.localStream
            .initialize()
            .catch(error => {
              console.error("初始化本地流失败 " + error);
            })
            .then(() => {
              console.log("初始化本地流成功");
              this.localStream.play("meBox");
              // this.localStream.resume();
              this.client
                .publish(this.localStream)
                .catch(error => {
                  console.error("本地流发布失败 " + error);
                })
                .then(() => {
                  console.log("本地流发布成功");
                  this.notifyUser(this.tempUser);
                });
            });
        })
        .catch(error => {
          console.error("Join room failed: " + error);
        });
    },

    notifyUser: function(id) {

      this.axios
        .post(
                "https://console.tim.qq.com/v4/openim/sendmsg?sdkappid=1400460026&identifier=188888888&usersig=eJwtjFELgjAURv-LnkPuXds0oRehULIgV74PNu2SxlCJIvrvmfq9fefA*bBLroOn61jMeABsNX2y7jFQRRPGaNkie3s33pNlMQoAoQC4mo17eercyKWUHABmOlD7ZwqicC02gEuF6rHdGnE6Q4oGswMpTJOyO*a3d3FNwqbUu74Z2rpAvwedbdn3ByrMMJo_&random=99999999&contenttype=json",
          {
            //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
            SyncOtherMachine: 2,
            To_Account: id,
            MsgLifeTime: 60,
            MsgRandom: 1287657,
            MsgTimeStamp: 1557387418,
            MsgBody: [
              {
                MsgType: "TIMCustomElem",
                MsgContent: {
                  Ext:
                    '{"roomID":99999999,"version":2,"videoState":0,"requestUser":"18888888888"}',
                  Data:  '{"roomID":99999999,"version":2,"videoState":0,"requestUser":"18888888888"}'
                }
              }
            ]
          }
        )
        .then(res => {
          console.log(res);
        })
        .catch(function(error) {
          alert(error);
        });
    }
  },
  mounted() {
    this.icon = beige; // 正确

    this.axios
      .get(apis.queryJonList, {
        //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
        params: {}
      })
      .then(res => {
        //此处要使用箭头函数，this指向才正确
        this.manData = res.data.result;
        let markers = [];
        let count = 0
        for(let item of this.manData) {
          if(item.lon != null && item.lat != null){
            if(count == 0){
              this.center = [item.lon, item.lat]
            }
            count += 0;
            markers.push({
              position: [item.lon, item.lat],   //地图上的圆点坐标的定位    循环添加接口数据
              //给marker添加循环点击事件
              events: {
                click() {
                }
              }
            })
          }
        }
        this.markers = markers;
        console.log(this.markers)


      })
      .catch(function(error) {
        alert(error);
      });
    //振微测试用
    this.client = TRTC.createClient({
      mode: "live",
      sdkAppId: 1400460026,
      userId: "188888888",
      userSig:
"eJwtjFELgjAURv-LnkPuXds0oRehULIgV74PNu2SxlCJIvrvmfq9fefA*bBLroOn61jMeABsNX2y7jFQRRPGaNkie3s33pNlMQoAoQC4mo17eercyKWUHABmOlD7ZwqicC02gEuF6rHdGnE6Q4oGswMpTJOyO*a3d3FNwqbUu74Z2rpAvwedbdn3ByrMMJo_"
    });
    //自己测试用
    // this.client = TRTC.createClient({
    //   mode: "live",
    //   sdkAppId: 1400376830,
    //   userId: "1380000002",
    //   userSig:
    //     "eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwobGFgZgYASVLU7JTiwoyExRsjI0MTAwNjezMDaAyKRWFGQWpQLFTU1NjYA6IKIlmblgMUsDSwMTSwNTqCmZ6UDDi03zHJPMkrO9S0Ndkv39DVzCkzwDnByLCwxdDJ0inNODc8uqciPSE33MfW2VagFMejEr"
    // });
  }
};
</script>
<style lang="less">
.boxsin {
  width: 780px;
  height: 912px;
  background: url(../assets/img/border4.png) no-repeat center center / 100% 100%;
}
.boxs {
  width: 100%;
  overflow: hidden;
  padding-right: 10px;
  // .manBox {
  //   width: 892px;
  //   height: 262px;
  //   overflow-y: scroll;
  //   padding-left: 61px;

  //   &-in {
  //     float: left;
  //     display: flex;
  //     align-items: center;
  //     width: 184px;
  //     height: 122px;
  //     padding-left: 10px;
  //     font-size: 14px;
  //     background: url(../assets/img/border4-2.png) no-repeat center center / 100% 100%;
  //     margin: 10px 10px 0px 2px;
  //   }
  //   &-in:nth-child(4n) {
  //     margin-right: 0;
  //   }
  //   &-in:nth-child(1),
  //   &-in:nth-child(2),
  //   &-in:nth-child(3),
  //   &-in:nth-child(4) {
  //     margin-top: 0;
  //   }
  //   &-num {
  //     font-size: 26px;
  //     width: 30px;
  //     margin-right: 6px;
  //     text-align: center;
  //   }
  //   &-img {
  //     width: 75px;
  //     height: 75px;
  //     background-color: #fff;
  //     margin-right: 14px;
  //   }
  //   &-class {
  //     color: #bdbeca;
  //     width: 84px;
  //     margin-right: 6px;
  //     div:first-child {
  //       margin-bottom: 11px;
  //       width: 85px;
  //       overflow: hidden;
  //       white-space: nowrap;
  //       text-overflow: ellipsis;
  //     }
  //   }
  //   &-btn {
  //     width: 24px;
  //     height: 24px;
  //     cursor: pointer;
  //   }
  // }
}

.mapBox {
  width: 780px;
  height: 879px;
  padding-top: 33px;
  position: relative;
  overflow: hidden;
  .border-titles {
    width: 159px;
    height: 44px;
    background: url(../assets/img/border4-title.png) no-repeat center center /
      100% 100%;
    position: absolute;
    top: 9px;
    left: 52%;
    transform: translate(-50%, 0);
    z-index: 999;
  }
  .yourBox {
    position: absolute;
    width: 405px;
    height: 460px;
    left: 36px;
    bottom: 30px;
    padding: 20px;
    background: url(../assets/img/your.png) no-repeat center center / 100% 100%;
  }
  .boxbtn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url(../assets/guaji.png) no-repeat center center / 100% 100%;
    position: absolute;
    right: 580px;
    cursor: pointer;
    bottom: 48px;
  }
  .meBox {
    position: absolute;
    width: 150px;
    height: 180px;
    right: 425px;
    top: 400px;
    border: 1px solid #1b4e85;
  }

  .amap-logo {
    opacity: 0;

    display: none;
  }
  .amap-copyright {
    opacity: 0; //去掉高德的版本号
  }

  .jzBox {
    width: 324px;
    height: 838px;
    position: absolute;
    overflow: hidden;
    top: 36px;
    right: 4px;
    transition: all 0.6s ease-out;

    .jzBox-l {
      padding: 61px 18px 0 28px;
      font-size: 14px;
      color: #50c9fc;
      position: absolute;
      width: 64.2px;
      height: 307px;
      background: url(../assets/img/jz1.png) no-repeat center center / 100% 100%;
      z-index: 99;
      cursor: pointer;
      .jzBox-btn {
        width: 14px;
        height: 14px;
        background: url(../assets/img/jzBtn.png) no-repeat center center / 100%
          100%;
        margin-bottom: 6px;
        transition: all 0.6s ease-out;
      }
    }
    .jzBox-r {
      position: absolute;
      left: 54px;
      width: 270px;
      height: 100%;
      background: url(../assets/img/jz2.png) no-repeat center center / 100% 100%;
      z-index: 99;
      .jzBox-in {
        width: 103%;
        overflow-y: scroll;
        height:92%;
        padding: 6px 12px 0;
        padding-left: 10px;
        margin-bottom: 10px;
        .jzBox-man {
          width: 248px;
          height: 164px;
          background: url(../assets/img/border4-2.png) no-repeat center center /
            100% 100%;
          padding: 32px 18px 0 20px;
          .jzBox-man-top {
            display: flex;
            align-items: center;
            margin-bottom: 22px;
            &-index {
              width: 20px;
              height: 20px;
              line-height: 20px;
              border-radius: 50%;
              background-color: #005eb1;
              font-size: 14px;
              text-align: center;
              color: #fff;
              margin-right: 20px;
            }
            &-img {
              width: 36px;
              height: 47.6px;
              margin-right: 18px;
            }
            &-text {
              color: #00ffff;
              font-size: 16px;
              flex: 1;
              .jzBox-man-top-text2 {
                color: #00deff;
                margin-top: 8px;
                font-size: 12px;
              }
            }
            &-btn {
              width: 20px;
            }
          }
          .jzBox-man-bottom span {
            display: block;
            width: 100%;
            font-size: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #B7E8FE;
          }
        }
      }
    }
  }
  .py1 {
    transform: translate(0, 0);
  }
  .py2 {
    transform: translate(270px, 0);
  }
  .xz1 {
    transform: rotate(0);
  }
  .xz2 {
    transform: rotate(180deg);
  }
  .py3 {
    transform: translate(10px, 0);
  }

  .jzBoxx {
    width: 324px;
    height: 838px;
    position: absolute;
    overflow: hidden;
    /*top: 36px;*/
    /*right: 4px;*/
    transition: all 0.6s ease-out;
    background: url(../assets/img/jz2.png) no-repeat center center / 100% 100%;
  }
  }
</style>
